Цепочки else if

Цепочка else if` позволяет проверить несколько условий последовательно — и выполнить только первый подходящий блок.

Синтаксис:

if (условие1) {
  // выполнится, если условие1 истинно
} else if (условие2) {
  // выполнится, если условие1 ложно, а условие2 истинно
} else if (условие3) {
  // выполнится, если условие1 и условие2 ложны, а условие3 истинно
} else {
  // выполнится, если все условия ложны (необязательно)
}

Важно: как только одно из условий становится истинным — выполняется соответствующий блок, и все остальные условия не проверяются.

Пример: определение роли пользователя

const userRole = "moderator";

if (userRole === "admin") {
  showAdminPanel();
} else if (userRole === "moderator") {
  showModeratorPanel();
} else if (userRole === "user") {
  showUserPanel();
} else {
  showGuestPanel();
}

Здесь:

  • Если роль — "admin" — показывается панель администратора, и проверка останавливается.
  • Если роль — "moderator" — показывается панель модератора, даже если бы были другие условия, они не проверяются.
  • Если ни одно из известных значений не подошло — показывается панель гостя.

Почему порядок важен?

Представьте, что вы перепутали порядок:

if (userRole === "user") {
  showUserPanel();
} else if (userRole === "moderator") {
  showModeratorPanel();
} else if (userRole === "admin") {
  showAdminPanel();
}

Если пользователь имеет роль "admin", он попадёт в блок "user", потому что "admin" содержит "user" как подстроку? Нет — в данном случае сравнение строгое (===), так что не сработает. Но если бы вы использовали indexOf или includes, ошибки были бы критичны.

Более реальный пример с ошибкой:

const score = 95;

if (score >= 60) {
  grade = "C"; // Всегда сработает первым!
} else if (score >= 80) {
  grade = "B";
} else if (score >= 90) {
  grade = "A";
}

Здесь оценка 95 получит "C", потому что первое условие score >= 60 уже истинно. Правильно:

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 60) {
  grade = "C";
} else {
  grade = "F";
}

Пример: выбор темы приложения

const themeSetting = "dark";

if (themeSetting === "light") {
  document.body.classList.remove("dark-theme");
  document.body.classList.add("light-theme");
} else if (themeSetting === "dark") {
  document.body.classList.remove("light-theme");
  document.body.classList.add("dark-theme");
} else if (themeSetting === "system") {
  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    document.body.classList.add("dark-theme");
  } else {
    document.body.classList.add("light-theme");
  }
} else {
  // значение неизвестно — используем по умолчанию
  document.body.classList.add("light-theme");
}

Здесь три явных варианта и один запасной — логика понятна, читаема, и порядок условий критичен.